import React, { useState, useEffect } from "react";
import { ReactFlowProvider } from "react-flow-renderer";
import Sider from "./components/sider";
import ToolBar from "./components/toolbar";
import Graph from "./components/graph";
import GlobalModal from "@/components/Modal";
import useKeyPress from "@/hook/useKeyPress";
import { useParams } from "react-router-dom";
import { useDispatch} from "react-redux";
import { Dispatch} from "@/store";
import style from "./index.module.less";

const ActiveDiagram = () => {
  useKeyPress(["32"], () => {
    console.log("按下了回车");
  });
  const { type, diagramId} = useParams<{ type: string; diagramId?: string }>();
  const dispatch = useDispatch<Dispatch>();
  // 可用节点
  useEffect(() => {
    dispatch.diagram.initMyDiagram({
      type,
      diagramId,
    });
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, []);

  // 画布实例
  const [reactFlowInstance] = useState(null);
  return (
    <div className={style.container}>
      {/* <ReviewForm></ReviewForm> */}
      <ReactFlowProvider>
        {/* 顶部工具栏 */}
        <ToolBar instance={reactFlowInstance} />
        <div className={style.main}>
          {/* 侧边栏，展示可拖拽的节点 */}
          <div className={style.sider}>
            <Sider />
          </div>
          {/* 画布，处理核心逻辑 */}
          <div className={style.graph}>
            <Graph />
          </div>
        </div>
        <GlobalModal />
      </ReactFlowProvider>
    </div>
  );
};
export default ActiveDiagram;
